<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学员信息表</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="jumbotron jumbotron-fluid">
    <div class="container">
        <h1 class="display-4">学员信息表</h1>
        <p class="lead">1803</p>
    </div>
</div>
<div class="container">
    <h2>添加</h2>
    <form class="form-inline">

        <div class="form-group mb-2">
            <label  class="sr-only">姓名</label>
            <input type="text"  class="form-control"  id="n" placeholder="姓名" style="width: 260px">
            <select class="form-control mx-sm-3" id="s" style="width: 260px;">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
            <label  class="sr-only">年龄</label>
            <input type="number" class="form-control" id="a" placeholder="年龄"  style="width: 260px">
            <button type="submit" class="btn btn-primary mx-sm-3" id="btn" style="width: 260px">添加</button>
        </div>
        <!--<div class="form-group mx-sm-3 mb-2">-->
        <!--&lt;!&ndash;<label for="inputPassword2" class="sr-only">Password</label>&ndash;&gt;-->
        <!--&lt;!&ndash;<input type="password" class="form-control" id="inputPassword2" placeholder="Password">&ndash;&gt;-->
        <!--</div>-->
        <!--<button type="submit" class="btn btn-primary mb-2">Confirm identity</button>-->
    </form>


</div>
<div class="container" style="margin-top: 50px">
    <h2>列表</h2>

    <table class="table">

        <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

</div>









<script>
    document.querySelector('#btn').addEventListener('click',function(){
//        获取姓名
        var n = document.querySelector('#n').value;
        console.log(n);
//        获取性别
        var s = document.querySelector('#s').value;
        console.log(s);
//        获取年龄
        var a = document.querySelector('#a').value;
        console.log(a);


//        ajax代码
        var xmlhttp;
        if (window.XMLHttpRequest)
        {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            // IE6, IE5 浏览器执行代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                console.log(xmlhttp.responseText);
            }
        };
//        xmlhttp.open("GET","http://localhost/ajaxApi/public/index.php/index/student/addStudent?studentName=小u&sex=男&age=18",true);
        xmlhttp.open("GET","http://localhost/ajaxApi/public/index.php/index/student/addStudent?studentName="+n+"&sex="+s+"&age="+a,true);
        xmlhttp.send();




    });



    function loadXMLDoc()
    {
        var xmlhttp;
        if (window.XMLHttpRequest)
        {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            // IE6, IE5 浏览器执行代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                var json =JSON.parse(xmlhttp.responseText);
                console.log(json.data);
                for(let i = 0;i<json.data.length;i++){
//                     document.querySelector("#list").appendChild(li);
                    var tdname = document.createElement("td");
                    tdname.innerHTML =json.data[i].studentName;
                    var tdsex = document.createElement("td");
                    tdsex.innerHTML = json.data[i].sex;
                    var tdage = document.createElement("td");
                    tdage.innerHTML=json.data[i].age;

                    var tr = document.createElement("tr");
                    tr.appendChild(tdname);
                    tr.appendChild(tdsex);
                    tr.appendChild(tdage);
                    document.querySelector("tbody").appendChild(tr);
                }

            }
        };
        xmlhttp.open("GET","http://localhost/ajaxApi/public/index.php/index/student/student",true);
        xmlhttp.send();
    }
    loadXMLDoc();






</script>




</body>
</html>